<!DOCTYPE html> 
<html>
<head>
     <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>首页</title>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <style>
         *{margin: 0;padding:0; }
         #page{margin:0 auto;width:100%;}
         #header{width:100%; height:80px; position:absolute; top:0;}
         #footer{width:100%; height:50px; position:absolute; bottom:0;text-align: center;padding-bottom: 4px;}
         #content{width:100%; overflow: auto; position:absolute; top:80px; bottom:50px;}
         #content::-webkit-scrollbar {
            display: none;
         }
         .header-top{
            display: inline-block;
            float: left;
            height: 50px;
            width: 100%;
            background:#FF4965;
          }
          .header-top img{
              width: 20px;
          }
          .sou-img{
              padding: 2px;
              padding-top: 3px;
          }
          .img-sou{
              padding-top: 3px;
              padding-right: 3px;
          }
          .header-top, .news, .div-sou{
               display: inline-block;
               float: left;
               text-align: center;
           }
           .header-top p{
               color: white;
               font-size: 12px;
               margin-top: -2px;
           }
           .news{
               margin-top: 7px;
               margin-left: 7px;
           }
           .div-sou{
               background-color: white;
               margin-top: 14px;
               margin-left: 20px;
               border-radius: 14px;
           }
           .div-sou input{
               vertical-align: super;
               height: 25px;
               border: none;
           }
           .classify{
               margin-top: 7px;
               margin-right: 7px;
               float: right;
           }
           .div-li{
                display: inline-block;
                float: left;
                width: max-content;
           }
           .div-li ul li{
               float: left;
               display: inline-block;
               margin-left: 7px;
               margin-top: 4px;
           }
            .currentli{
               color: red;
             }
             #footer ul li img{
                 width: 30px;
             }
              #footer ul li{
                  float: left;
                  list-style: none;
                  width: 20%;
              }
              #footer ul li p{
               font-size: 12px;
                margin-top: -5px;
              }
              .img img{
                  width: 100%;
              }
              .chou img{
                  width: 20%;
              }
              .chou p{
                  display: inline-block;
                 font-size: 13px;
                 vertical-align: super
              }
             .div-icon ul li{
                 float: left;
                list-style: none;
                width: 25%; 
              }
              .div-icon ul img{
                width: 88%; 
              }
            .div-icon{
                text-align: -webkit-center;
                padding-top: 3px;
                width: 100%;
                padding-bottom: 3px;
            }
            .div-refa img{
                width: 100%;
            }
            .xian-img{
                width: 90%;
                margin-top: 15px;
            }
            .ping img{
                width: 49%;
            }
            .pingzuo{
                width: 30%;
                display: inline-block;
                float: left;
            }
            .ping{
                width: 70%;
                display: inline-block;
                float: left;
            }
            .ping li{
                float: left;
                list-style: none;
                width: 50%;
            }
            .miaosha{
                text-align: -webkit-center;
                padding: 5px;
            }
            .fontnor{
                font-size: 14px;
            }
            .pingzuo span{
                background-color: #6A6869;
                color: white;
                font-size: 12px;
                padding: 1px;
                border-radius: 5px;
            }
            .font-red{
                font-size: 17px;
                color: red;
            }
            .divhuo img{
                width: 50%;
                padding: 7px;
            }
            .div6 img{
                width: 23%;
                padding: 7px;
            }
            .henghua img{
                width: 1%;
            }
             .henghua{
                 width: max-content;
             }
             .div5 img{
                 width: 100%;
             }
             .div8 img{
                 width: 100%;
             }
             .div7 .icon{
                 width: 10%;
                padding-left: 7px;
                padding-top: 0px;
             }
             .div7-2 p{
                display: inline;
                float: right;
                margin-right: 36%;
                text-align: -webkit-left;
             }
             .youicon{
                 float: right;
                width: 5%;
                margin-right: 9px;
             }
             .div7-1 img{
                 width: 50%;
             }
             .div7-1 li{
                 float: right;
                 width: 33%;
                 list-style: none;
                font-size: 12px;
             }
             .div7-1{
                 text-align: center;
             }
             .div7-1  p{
                 margin-top: 7px;
                 margin-bottom: 7px;
             }
             .xianjia{
                 font-size: 16px;
                 color: red;
             }
             .yuanjia{
                 text-decoration: line-through;
                 color: #B3AAA4;
             }
             .div7{
                 border-top: 5px solid #FAF8F6;
                 padding-top: 6px;
             }
    </style>
 
</head>
<body>
<div id="page">
    <div id="header">
            <div class="header-top">
                 <div class="news">
                    <img src="../img/xiao.png">
                    <p>消息</p>
                </div>
                <div class="div-sou">
                    <img class="sou-img" src="../img/sou.png">
                    <input placeholder="请输入">
                    <img class="img-sou" src="../img/saomiao.png">
                </div>
                <div class="classify">
                    <img src="../img/fen.png">
                    <p>分类</p>
                </div>
            </div>
            <div class="div-li">
                <ul>
                    <li>首选</li>
                    <li>甄选</li>
                    <li>全球购</li>
                    <li>婴童</li>
                    <li>美妆</li>
                    <li>童装</li>
                    <li>玩具</li>
                    <li>孕产</li>
                    <li>家居</li>
                    <li>首选</li>
                    <li>甄选</li>
                    <li>全球购</li>
                    <li>婴童</li>
                    <li>美妆</li>
                    <li>童装</li>
                    <li>玩具</li>
                    <li>孕产</li>
                    <li>家居</li>
                </ul>
            </div>
    </div>  
    <div id="content">
      <div>
        <ul class="img">
            <li><a href="#"><img  src="../img/a.jpg" alt="第1张图片"></a></li>
            <!--<li><a href="#"><img  src="../img/b.jpg" alt="第2张图片"></a></li>
            <li><a href="#"><img  src="../img/c.jpg" alt="第3张图片"></a></li>
            <li><a href="#"><img  src="../img/d.jpg" alt="第4张图片"></a></li>
            <li><a href="#"><img  src="../img/e.jpg" alt="第5张图片"></a></li>-->
        </ul>
        <!--<ul class="num"></ul>
        <ul class="des">
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>
            <li>第五个</li>
            <li>第一个</li>
        </ul>
        <div class="btn">
            <span class="prev"><</span>
            <span class="next">></span>
        </div> -->
      </div>
    <div class="chou">
        <img src="../img/jin.png">
        <img src="../img/yun.png">
        <p>iPhone7等你来拿，不要错过！</p>
    </div>
    <div class="div-icon">
        <ul>
            <li>
                <img src="../img/icon/qian.png">
            </li>
            <li>
                <img src="../img/icon/chong.png">
            </li>
            <li>
                <img src="../img/icon/hui.png">
            </li>
            <li>
                <img src="../img/icon/ling.png">
            </li>
            <li>
                <img src="../img/icon/ji.png">
            </li>
            <li>
                <img src="../img/icon/chou.png">
            </li>
            <li>
                <img src="../img/icon/xian.png">
            </li>
            <li>
                <img src="../img/icon/dian.png">
            </li>
        </ul>
    </div>
    <div class="div-refa">
        <img src="../img/icon/haoqi.jpg">
    </div>
    <div class="miaosha">
        <div class="pingzuo">
            <p class="font-red">显示秒杀</p>
            <p class="fontnor">每天3个整点9.9元秒杀</p>
            <p>
                <span>04</span>：<span>43</span>：<span>46.2</span>
            </p>
             <img class="xian-img" src="../img/xian/4.jpg">
        </div>
        <div class="ping">
            <ul>
                <li>
                    <p class="font-red">天天拼团</p>
                    <p class="fontnor">每日极速火拼</p>
                    <img src="../img/xian/3.jpg">
                </li>
                <li>
                    <p class="font-red">奶粉尿裤</p>
                    <p class="fontnor">贝贝正品保证</p>
                    <img src="../img/xian/1.jpg">
                </li>
                <li>
                    <p class="font-red">全球购</p>
                    <p class="fontnor">5折爆款限时抢</p>
                    <img src="../img/xian/2.jpg">
                </li>
                <li>
                    <p class="font-red">底价清仓</p>
                    <p class="fontnor">低至9.5元</p>
                    <img src="../img/xian/5.jpg">
                </li>
            </ul>
        </div>
    </div>
        <div class="divnew">
            <img src="../img/new.jpg" style="width:100%;">
        </div>
         <div class="divhuo">
            <img src="../img/xian/huo.png">
        </div>
         <div class="div5">
            <img src="../img/xihu.jpg">
        </div>
         <div class="henghua">
              <img src="../img/tu1/dapai.jpg" />
              <img src="../img/tu1/hufuxiang.jpg" />
              <img src="../img/tu1/renxuan.jpg" />       
              <img src="../img/tu1/ruifuru.jpg" />
              <img src="../img/tu1/shijin.jpg" />
              <img src="../img/tu1/tongxie.jpg" />         
              <img src="../img/tu1/xiyizhao.jpg" />
              <img src="../img/tu1/yinzhuan.jpg" />     
         </div>
         <div class="div8">
            <img src="../img/muying.jpg">
        </div>
         <div class="henghua">
              <img src="../img/tu1/dapai.jpg" />
              <img src="../img/tu1/hufuxiang.jpg" />
              <img src="../img/tu1/renxuan.jpg" />       
              <img src="../img/tu1/ruifuru.jpg" />
              <img src="../img/tu1/shijin.jpg" />
              <img src="../img/tu1/tongxie.jpg" />         
              <img src="../img/tu1/xiyizhao.jpg" />
              <img src="../img/tu1/yinzhuan.jpg" />     
         </div>
        <div class="div6">
            <img src="../img/xian/pin.png">
        </div>
        <div class="div7">
            <div>
                <div class="div7-2">
                        <img src="../img/pingpai/bulang.jpg" class="icon">
                        <img src="../img/pingpai/you.png" class="youicon">
                        <p>布朗博士 Dr Brown's</p>
                </div>
                <div class="div7-1">
                    <ul>
                        <li>
                            <img src="../img/pingpai/bulang1.jpg">
                            <p>布朗博士防胀气宽口玻璃奶瓶套装</p>
                            <p>
                                <span class="xianjia">￥</span><span class="xianjia">206</span>
                                <span class="yuanjia">￥</span><span class="yuanjia">279</span>
                            </p>  
                        </li>
                        <li>
                            <img src="../img/pingpai/bulang2.jpg">
                            <p>布朗博士橄榄油面霜50g</p>
                            <p>
                                <span class="xianjia">￥</span><span class="xianjia">58</span>
                                <span class="yuanjia">￥</span><span class="yuanjia">99</span>
                            </p>  
                        </li>
                        <li>
                            <img src="../img/pingpai/bulang2.jpg">
                            <p>布朗博士洗手液套装系列</p>
                            <p>
                                <span class="xianjia">￥</span><span class="xianjia">48</span>
                                <span class="yuanjia">￥</span><span class="yuanjia">89</span>
                            </p>  
                        </li>
                    </ul>
                </div>
           </div>
            <div>
                <div class="div7-2">
                        <img src="../img/pingpai/beiqin.jpg" class="icon">
                        <img src="../img/pingpai/you.png" class="youicon">
                        <p>贝亲 Pigeon</p>
                </div>
                <div class="div7-1">
                    <ul>
                        <li>
                            <img src="../img/pingpai/beiqin1.jpg">
                            <p>布朗博士防胀气宽口玻璃奶瓶套装</p>
                            <p>
                                <span class="xianjia">￥</span><span class="xianjia">206</span>
                                <span class="yuanjia">￥</span><span class="yuanjia">279</span>
                            </p>  
                        </li>
                        <li>
                            <img src="../img/pingpai/beiqin2.jpg">
                            <p>布朗博士橄榄油面霜50g</p>
                            <p>
                                <span class="xianjia">￥</span><span class="xianjia">58</span>
                                <span class="yuanjia">￥</span><span class="yuanjia">99</span>
                            </p>  
                        </li>
                        <li>
                            <img src="../img/pingpai/beiqin2.jpg">
                            <p>布朗博士洗手液套装系列</p>
                            <p>
                                <span class="xianjia">￥</span><span class="xianjia">48</span>
                                <span class="yuanjia">￥</span><span class="yuanjia">89</span>
                            </p>  
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div>
            <div>
                <img src="../img/pingpai/fujin.jpg">
            </div>
            <div>
                <div>
                    <img src="../img/pingpai/zhuangying.jpg">
                    <p></p>
                    <img src="../img/pingpai/you.png" class="youicon">
                </div>
            </div>
        </div>
    </div>
      <div id="footer"> 
　　      <ul style="margin-top: -14px">
                 <li>
                     <img src="../img/footer/fangzi.png">
                     <p>首页</p>
                 </li>
                 <li>
                     <img src="../img/footer/xiangji.png">
                     <p>视频</p>
                 </li>
                 <li>
                     <img src="../img/footer/qinzi.png">
                     <p>育儿</p>
                 </li>
                 <li>
                     <img src="../img/footer/guowuche.png">
                     <p>购物车</p>
                 </li>
                 <li>
                     <img src="../img/footer/wode.png">
                     <p>我的</p>
                 </li>
             </ul>
    </div> 
</div>
</body>
 <script type="text/javascript">
  $(".div-li li").click(function(){
            $(this).addClass("currentli").siblings().removeClass("currentli");
  })
</script>

</html>